import { observer } from "mobx-react";
import { Resizable } from 'react-resizable';
import D3Tree from "../../common/tree/RectTree";
import { toJS } from 'mobx';
import NodeForm from './NodeForm';
import NodeModal from "../../dialog/NodeModal";
import {  message, Modal } from 'antd';
import { WeaBrowser,WeaLocaleProvider } from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
@observer
export default class DynamicPathTree extends React.Component {

    componentDidMount() {
        this.fixedWidth();
        window.onresize = () => {
            clearTimeout(this.timer);
            this.timer = setTimeout(() => {
                this.fixedWidth();
            }, 100);
        }
    }
    fixedWidth = () => {
        if (this.container) {
            const { store } = this.props;
            const clientWidth = this.container.clientWidth - 20;
            store.fixedWidth(clientWidth);
        }
    }
    render() {
        const { height = '100%', store  } = this.props;
        const { readonly,nodeForm,hasChildren,path,versionNode } = store;
        const dataParams = path?{pathid:path.id,nodeid:nodeForm.id}:{};
        return (

            <div className="edc-path-tree" ref={ref => this.container = ref}>
                <Resizable axis="x" minConstraints={[200, 200]} height={height} width={store.leftWidth} onResize={store.onLeftResize}>
                    <div className="left checked" style={{ width: store.leftWidth, height }}>
                        <D3Tree
                            data={toJS(store.dynamicNode)}
                            //onClick={store.clickNode}
                            showRight={false}
                            layout={store.layout}
                            style={{ height: '100%', top: 0 }}
                            scale={store.scale}
                            zoom={this.zoom}
                            ref={ref => store.treeRef = ref}
                            showMenu={true}
                            showname={this.getShowname}
                            showSubmitCount={false}
                            //onSetting={this.openNode}
                            //desc={this.getDesc}
                        ></D3Tree>
                    </div>
                </Resizable>
                <div className="right" style={{ width: store.rightWidth, height }}>
                    {versionNode && <D3Tree
                        data={toJS(versionNode)}
                        onClick={store.openNode}
                        showRight={store.showRight}
                        renderRight={<NodeForm store={store} />}
                        layout={store.layout}
                        style={{ height: '100%'}}
                        scale={store.scale}
                        zoom={this.zoom}
                        ref={ref => store.d3Tree = ref}
                        showMenu={true}
                        onDelete={(readonly || !nodeForm.parentid) ||  this.deleteNode}
                        onAddChild={readonly ||  this.addChildren}
                        onDeleteChild={(readonly) || (hasChildren && this.deleteChildren)}
                        onSynchro={readonly || this.synchronize}
                        showname={this.getShowname}
                        desc="hreflinkName"
                    >
                    </D3Tree>}
                </div>
                <WeaBrowser
                    ref={ref => this.browser = ref}
                    isSingle={false}
                    type={17}
                    customized={true}
                    onChange={this.addNodes}
                    icon="icon-coms02-Data-center"
                    iconBgcolor="#1a57a0"
                    title={getLabel('511010','添加下级')}
                    memorise={true}
                    replaceDatas={store.childOpreator.slice()}
                    value={store.childOpreator.map(d => d.id).join(',')}
                />
                <WeaBrowser
                    icon={"icon-coms02-Data-center"} 
                    title={getLabel('510980','选择节点')}
                    type='edcAppPathNode' 
                    isSingle={false}
                    customized={true}
                    //memorise={true}
                    ref={ref => this.nodeBrowser = ref} 
                    dataParams={dataParams}
                    completeParams={dataParams}
                    destDataParams={dataParams}
                    onChange={store.synchronizeNode}
                />
                <NodeModal store={store.nodeModalStore}></NodeModal>
            </div>
            
        );
    }
    getShowname = (d) => {
        return `${d.name}`;
    }
    getDesc = (d) => {
        return `${getLabel('511873','操作者：')} ${d.resourceObj.map(d => d.name).join(',')}`;
    }
    openNode = (d) => {
        const { store } = this.props;
        store.showNodeModal(d.id, d.parentid);
    }
    zoom = (scale) => {
        const {    store, params } = this.props;
        store.changeScale(parseInt(scale * 10));
    }
    addChildren = () => {
        const {    store } = this.props;
        const { nodeForm } = store;
        store.setChildOpreator([]);
        store.allChildOpreator(nodeForm.id).then((childOpreator) => {
            store.setChildOpreator(childOpreator);
            if (this.browser) {
                this.browser.openModal();
                const selectPerson = (ids, names, objs) => {
                    if (objs.length > 99) {
                        message.warn(getLabel('502645', '下级节点不能超过99个'));
                        this.browser.openModal();
                        return;
                    }
                    const {    store } = this.props;
                    const oldids = childOpreator.map(d => d.id);
                    const newids = objs.filter(d => oldids.indexOf(d.id) === -1).map(d => d.id);
                    if (newids.length === 0) {
                        message.warn(getLabel('502646', '请选择需要添加的人员'));
                        return;
                    }
                    store.addNodes(nodeForm.id, newids.join(','));
                }
                this.selectPerson = selectPerson;
            }
        });
    }
    addNodes = (ids, names, objs) => {
        this.selectPerson(ids, names, objs);
    }

    deleteNode = () => {
        Modal.confirm({
            title: getLabel('511008','删除节点'),
            content: getLabel('511009','确认要删除所有下级节点？'),
            onOk: () => {
                const {    store } = this.props;
                const { nodeForm } = store;
                store.deleteNode(nodeForm.id);
            }
        });
    }
    deleteChildren = () => {
        Modal.confirm({
            title: getLabel('511008','删除节点'),
            content: getLabel('511009','确认要删除所有下级节点？'),
            onOk: () => {
                const {   store } = this.props;
                const { nodeForm } = store;
                store.deleteChildren(nodeForm.id);
            }
        });
    }

    synchronize = () => {
        if (this.nodeBrowser) {
            this.nodeBrowser.openModal();
        }
    }
}